<template>
  <div class="wrapper">
    <input type="text" placeholder="title" class="title" v-model="title">
    <textarea class="doc" placeholder="qrcode content" v-model="link"></textarea>
    <button class="inverse btn" @click="clickHandle">Create</button>
    <button class="primary btn" @click="updateClickHandle">Update</button>
    <button class=" btn" @click="cancelClickHandle">Cancel Update</button>
  </div>
</template>
<script>

import {ElNotification} from "element-plus";

export default {
  props: ['isUpdate', 'activeQrcode'],
  data() {
    return {
      link: '',
      title: ''
    }
  },
  created() {
    this.link = this.activeQrcode.content;
    this.title = this.activeQrcode.title;
  },
  methods: {
    clickHandle() {
      try {
        if (this.link.length === 0) {
          ElNotification({
            title: 'Warning',
            message: 'Fail：Empty title or empty content',
            type: 'warning',
          })
        }
        if (this.title.length === 0) {
          this.title = this.link;
        }
        const param = {
          title: this.title,
          link: this.link,
          timestamp: Date.now(),
        };
        this.$emit('createQrcode', param)
      } catch (err) {
        ElNotification({
          title: 'Warning',
          message: 'Fail：' + err,
          type: 'warning',
        })
      }
    },
    cancelClickHandle() {
      this.$emit('cancel', {})
    },
    updateClickHandle() {
      if (this.link.length === 0) {
        ElNotification({
          title: 'Warning',
          message: 'Fail：Empty title or empty content',
          type: 'warning',
        })
      }
      if (this.title.length === 0) {
        this.title = this.link;
      }
      const param = {
        title: this.title,
        link: this.link,
      };
      this.$emit('updateQrcode', {
        ...this.activeQrcode,
        ...param
      });
    }
  }
}
</script>
<style scoped>
.wrapper {
  width: 100%;
}

.btn {
  float: left;
}

.doc {
  width: 100%;
  height: 100px;
  resize: vertical;
}

.title {
  width: 100%;
}
</style>
